window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
  var newData = [
    {
      id: 1,
      data: "2022-11-12",
      temperature: 36.5,
    },
    {
      id: 2,
      data: "2022-11-13",
      temperature: 36.5,
    },
    {
      id: 3,
      data: "2022-11-14",
      temperature: 36.5,
    },
    {
      id: 3,
      data: "2022-11-15",
      temperature: 36.5,
    },
  ];
  var nucleicData = [
    {
      id: 1,
      samplingDate: "2022-11-12",
      company: "独墅湖医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 2,
      samplingDate: "2022-01-12",
      company: "苏大附属第一医院",
      swab: "是",
      serum: "是",
      data: "2022-08-12",
      result: "阴性",
    },
    {
      id: 3,
      samplingDate: "2022-11-12",
      company: "独墅湖医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 4,
      samplingDate: "2022-11-12",
      company: "苏大附属第一医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 5,
      samplingDate: "2022-11-12",
      company: "独墅湖医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 6,
      samplingDate: "2022-11-12",
      company: "苏大附属第一医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 7,
      samplingDate: "2022-11-12",
      company: "独墅湖医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 8,
      samplingDate: "2022-11-12",
      company: "苏大附属第一医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
    {
      id: 9,
      samplingDate: "2022-11-12",
      company: "苏大附属第一医院",
      swab: "是",
      serum: "是",
      data: "2022-11-12",
      result: "阴性",
    },
  ];
  var oTBody = document.querySelectorAll("tbody");
  function render() {
    oTBody[0].innerHTML = "";

    for (var i = 0; i < newData.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
            <td>${newData[i].id}</td>
            <td>${newData[i].data}</td>
            <td>
            <input type="text" value="36.5">
          </td>
            `;
      oTBody[0].appendChild(oTr);
    }
    oTBody[1].innerHTML = "";

    for (var i = 0; i < nucleicData.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
            <td>${nucleicData[i].id}</td>
            <td>${nucleicData[i].samplingDate}</td>
            <td>${nucleicData[i].company}</td>
            <td>${nucleicData[i].swab}</td>
            <td>${nucleicData[i].serum}</td>
            <td>${nucleicData[i].data}</td>
            <td>${nucleicData[i].result}</td>
            `;
      oTBody[1].appendChild(oTr);
    }
  }
  render();

  var data = JSON.parse(localStorage.getItem("username"));
  var userName = document.querySelector(".userName");
  var userId = document.querySelector(".userId");
  var userTel = document.querySelector(".userTel");
  var userData = document.querySelector(".userData");
  userName.innerHTML = data.name;
  userId.innerHTML = data.number;
  userTel.innerHTML = data.tel;
  userData.innerHTML = data.date;
  // 新增
  var addButton = document.querySelector(".add-btn");
  var addSaveBtn = document.querySelector(".addSaveBtn");
  console.log(addButton);
  addButton.onclick = function () {
    $("#addModal").modal("show");
  };
  addSaveBtn.addEventListener("click", addSave);
  function addSave() {
    var addId = document.querySelector(".addId").value;
    var addData = document.querySelector(".addData").value;
    var addTemperature = document.querySelector(".addTemperature").value;
    console.log(addId, addData, addTemperature, data);

    newData.push({
      id: addId,
      data: addData,
      temperature: addTemperature,
    });
    render();
    //让模态框隐藏
    $("#addModal").modal("hide");
  }
  // 核酸检测登记
  var oDiv=document.querySelector('.follow-span2')
  var oDiv1=document.querySelector('.follow-span1')
  var tableBox=document.querySelector('.table-box')
  var nucleicBox=document.querySelector('.nucleic-box')
  oDiv.addEventListener('click',showFn)
  function showFn(){
    tableBox.style.display='none'
    oDiv1.classList.remove('follow-span1')
    nucleicBox.style.display='block'
    this.classList.add('follow-span1')
  }
  oDiv1.addEventListener('click',showFn1)
  function showFn1(){
    tableBox.style.display='block'
    oDiv.classList.remove('follow-span1')
    nucleicBox.style.display='none'
    this.classList.add('follow-span1')
  }
};
